<style lang="less">
    @import "../../../styles/table.less";
</style>
<template>
    <div class="search">
            <Row type="flex" justify="space-between" class="code-row-bg">
                <Col v-if="expand" span="5">
                    <Card title="所属维度" style="height:100%">
                    <div class="tree-bar">
                        <Tree ref="tree" :data="treeData" :load-data="loadData" @on-select-change="selectTree"></Tree>
                    </div>
                    <Spin size="large" fix v-if="treeLoading"></Spin>
                        <a href="#" slot="extra" @click.prevent="changeExpand">
                            <Tooltip content="折叠" placement="left">
                                <Icon type="md-arrow-round-back"/>
                            </Tooltip>
                        </a>
                    </Card>
                </Col>
                <Col :span="span">
                    <Card>
                    <Row>
                        <Form ref="searchForm" :model="searchForm" inline :label-width="60" class="search-form">
                            <Form-item label="员工姓名" prop="userName">
                                <Input type="text" v-model="searchForm.userName" placeholder="请输入" clearable style="width: 200px"/>
                            </Form-item>
                            <!--<Form-item label="段位等级" prop="duanLevel">
                                <Select v-model="searchForm.duanLevel" placeholder="请选择段位"    style="width: 200px">
                                    <Option value="bronze">青铜</Option>
                                    <Option value="silver">白银</Option>
                                    <Option value="gold">黄金</Option>
                                    <Option value="platinum">铂金</Option>
                                    <Option value="diamond">钻石</Option>
                                </Select>
                            </Form-item>-->
                            <Form-item style="margin-left:-35px;" class="br">
                                <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                                <Button @click="handleReset">重置</Button>
                            </Form-item>
                        </Form>
                    </Row>
                    <div class="left-operation-right">
                        <div>
                            <RadioGroup v-model="searchForm.type" @on-change="changeFileType" type="button" style="margin-right:2px">
                                <Radio label="1">本企业</Radio>
                                <Radio label="2">全部企业</Radio>
                            </RadioGroup>
                        </div>
                    </div>
                    <div v-if="showType=='list'">
                        <Row>
                            <Table :loading="loading" border :columns="columns" :data="data" sortable="custom" @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table"></Table>
                        </Row>
                    </div>

                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                        <p slot="title" @click.prevent="changeExpand">
                            <Icon v-if="!expand" type="md-arrow-round-forward"/>
                            企业排名管理
                        </p>
                    </Card>
                </Col>
            </Row>
    </div>
</template>

<script>
    import circleLoading from "../../my-components/circle-loading.vue";
    import {selectExamType,companyRank} from "@/api/bus";
    export default {
        name: "courseManage",
        components: {
            circleLoading
        },
        data() {
            return {
                treeLoading: false, // 树加载状态
                index: 1,
                addExamBtn:true,
                formAdd: {
                    id:"",
                    userName:'',
                    level:"LT_EASY",
                    duanLevel:"bronze",
                    examtypeId:"",
                    createTime:"",
                    answeringTime:"20",
                    items: [
                        {
                            value: '',
                            index: 1,
                            status: 1,
                            correct:false
                        },
                    ]
                },
                loading: false, // 表加载状态
                editTitle: "", // 编辑节点名称
                searchKey: "", // 搜索树
                expand: true,
                fileType: "all",
                showType: "list",//数据展示方式
                span: 19,
                expandIcon: "ios-arrow-back",
                selectNode: {},
                treeData: [], // 树数据
                operationLoading: false, // 操作加载状态
                selectCount: 0, // 多选计数
                selectList: [], // 多选数据
                searchForm: {
                    // 搜索框对应data对象
                    userName: "",
                    examtypeId: "",
                    type: 1,
                    pageNumber: 1, // 当前页数
                    pageSize: 10, // 页面大小
                    order: "desc" // 默认排序方式
                },
                modalType: 0, // 添加或编辑标识
                modalVisible: false, // 添加或编辑显示
                modalTitle: "", // 添加或编辑标题
                columns: [
                    // 表头
                    {
                        type: "selection",
                        width: 60,
                        align: "center"
                    },
                    {
                        type: "index",
                        width: 60,
                        align: "center"
                    },
                    {
                        title: "员工名称",
                        key: "userName"
                    },
                    {
                        title: "手机号码",
                        key: "mobile",
                        render: (h, params) => {

                            if (params.row.type === "1") {
                                return h("div", params.row.mobile);
                            }
                            return "";
                        }
                    },
                    {
                        title: "段位等级",
                        key: "duanName",
                        sortable: true
                    },
                    {
                        title: "项目分数",
                        key: "abilityScore",
                        sortable: true
                    },
                    {
                        title: "本公司排名",
                        key: "ourCom",
                        sortable: true
                    },
                    {
                        title: "全部排名",
                        key: "allCom",
                        sortable: true
                    },
                    {
                        title: "公司名称",
                        key: "compName"
                    }/*,
                    {
                        title: "部门名称",
                        key: "deptName",
                        render: (h, params) => {
                            if (params.row.type === "1") {
                                return h("div", params.row.deptName);
                            }
                            return "";
                        }
                    }*/
                ],
                data: [], //表单数据
                total: 0// 表单数据总数
            };
        },
        methods: {
            init() {
                this.getTreeData();
            },
            getDataList() {
                this.loading = true;
                // 根据用户选择树加载表数据
                companyRank(this.searchForm).then(res => {
                    this.loading = false;
                    if (res.status === true) {
                        this.data = res.data.rows;
                        this.total = res.data.total;
                    }
                });

            },
            addDcit(){},
            handleDropdown(){},
            changeFileType(){
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getDataList();
            },
            handleAdd () {
                this.index++;
                this.formAdd.items.push({
                    value: '',
                    index: this.index,
                    status: 1,
                    correct:0
                });
            },
            handleRemove (index) {
                this.formAdd.items[index].status = 0;
                this.formAdd.items.splice(index, 1);
                this.index--;
            },
            //加载一级课程类型
            getTreeData() {
                this.treeLoading = true;
                selectExamType({parentId:0}).then(res => {
                    this.treeLoading = false;
                    if (res.status === true) {
                        this.treeData = res.data;
                        this.searchForm.examtypeId = this.treeData[0].id;
                        // 获取表单数据
                        this.getDataList();
                    }
                });
            },
            //加载二级课程类型
            loadData(item, callback) {
                selectExamType({parentId:item.id}).then(res => {
                    if (res.status === true) {
                        callback(res.data);
                    }
                });
            },
            search() {
                // 搜索树
                if (this.searchKey) {

                }

            },
            selectTree(v) {
                if (v.length > 0) {
                    let str = JSON.stringify(v[0]);
                    let data = JSON.parse(str);
                    this.selectNode = data;
                    this.searchForm.examtypeId = this.selectNode.id;
                    if (this.selectNode.isParent==1) {
                        this.formAdd.examtypeId=data.id;
                        this.addExamBtn = false;
                    }
                    this.editTitle = data.title;
                    // 重新加载表
                    this.getDataList();
                } else {
                    this.cancelEdit();
                }
            },
            cancelEdit() {
                let data = this.$refs.tree.getSelectedNodes()[0];
                if (data) {
                    data.selected = false;
                }
                // 取消选择后获取全部数据
                this.selectNode = {};
                this.editTitle = "";
                this.getDataList();
            },
            changeSelect(v) {
                this.selectCount = v.length;
                this.selectList = v;
            },
            changeExpand() {
                this.expand = !this.expand;
                if (this.expand) {
                    this.expandIcon = "ios-arrow-back";
                    this.span = 19;
                } else {
                    this.expandIcon = "ios-arrow-forward";
                    this.span = 24;
                }
            },
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.getDataList();
                this.clearSelectAll();
            },
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.getDataList();
            },
            changeShowType() {
                this.searchForm.pageNumber = 1;
                if (this.showType == "list") {
                    this.searchForm.pageSize = 5;
                } else {
                    this.searchForm.pageSize = 12;
                }
                this.getDataList();
            },
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getDataList();
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                // 重新加载数据
                this.getDataList();
            },
            changeSort(e) {
                this.searchForm.sort = e.key;
                this.searchForm.order = e.order;
                if (e.order === "normal") {
                    this.searchForm.order = "";
                }
                this.getDataList();
            },
            showSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
            },
            clearSelectAll() {
                this.$refs.table.selectAll(false);
            },
        },
        mounted() {
            this.init();
        }
    };
</script>